<!--自动填充满中间剩余空间高度的容器，分上，中，下三部分-->
<template>
  <div style="display:flex;flexDirection: column;height:100%;" class="content-layout">
    <div v-show="!excludeTop" class="content-layout-top" :style="{'padding-left':collapsible?'20px':'0px'}">
      <slot name="top"></slot>
    </div>
    <div style="flex:1;overflow: auto;" >
      <div ref="centerRef">
        <a-collapse v-if="collapsible" defaultActiveKey="1" :accordion="false" :bordered="false" expandIconPosition="left">
          <a-collapse-panel key="1" >
            <slot name="center"></slot>
          </a-collapse-panel>
        </a-collapse>
        <slot v-else name="center"></slot>
      </div>
      <div class="content-layout-bottom" :style="getBottomStyle">
        <slot name="bottom"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContentLayout',
  props: {
    /**
     * 是否排除顶部区域
     */
    excludeTop: {
      type: Boolean,
      default: false
    },
    /**
     * 是否可折叠中心内容区域
     */
    collapsible: {
      type: Boolean,
      default: false
    },
    /**
     * 是否自动计算底部需要高度
     */
    calculateBottomHeight: {
      type: Boolean,
      default: false
    },
    /**
     * 底部区域最低高度
     */
    bottomMinHeight: {
      type: Number,
      default: 240
    }
  },
  data () {
    return {
      bottomHeight: null,
      footerExist: false,
      footerHeight: 80
    }
  },
  computed: {
    /**
     * 获取底部区域样式高度
     * @returns {{height: string}}
     */
    getBottomStyle() {
      let bottomHeight = '100%'
      if (this.calculateBottomHeight && this.bottomHeight) {
        const height = this.bottomHeight - (this.footerExist ? this.footerHeight : 0)
        bottomHeight = (height > this.bottomMinHeight ? height : this.bottomMinHeight) + 'px'
      }
      return { height: bottomHeight }
    }
  },
  created () {
  },
  mounted () {
    const _this = this
    //定义监听中部区域的高度变化，自动调整最下方区域的剩余高度
    if (this.calculateBottomHeight && this.bottomHeight) {
      this.containsFooter(this)
      const rootRo = new ResizeObserver(entries => {
        _this.$nextTick(() => {
          const dom = _this.$refs.centerRef
          const domHeight = dom.getBoundingClientRect().height
          if (domHeight > 0) {
            _this.bottomHeight = dom.parentNode.getBoundingClientRect().height - domHeight
          } else {
            _this.bottomHeight = null
          }
        })
      })
      rootRo.observe(this.$refs.centerRef)
    }
  },
  beforeDestroy () {
  },
  methods: {
    //判断是否存在Footer,预留出悬浮页脚的高度
    containsFooter(vComp) {
      if (!vComp || this.footerExist) {
        return
      }
      if (!vComp.$vnode) {
        return
      }
      let tag = vComp.$vnode.tag
      if (tag.endWith('-AntFooter')) {
        this.footerExist = true
        return
      }
      let arr = vComp.$children
      for (let i = 0; i < arr.length; i++) {
        this.containsFooter(arr[i])
      }
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-tabs{
  height:100% !important;
}
::v-deep .ant-tabs-content {
  height:100% !important;
}
::v-deep .ant-form-inline {
  .ant-form-item {
    margin-right: 0px !important;
  }
}
::v-deep .ant-collapse-header{
  position: absolute !important;
  top: 16px !important;
  left: 0px;
}
::v-deep .ant-collapse-arrow{
  animation: scaleout 3s infinite ease-in-out;
}
@keyframes scaleout {
  50% {
    opacity: 0.35;
  }
}
.content-layout{
  font-family: @primary-font-family;
}
.content-layout-top{
  margin:5px 10px;
}
.content-layout-bottom{
  padding:0px 10px;
  height:100%;
  .c-row{
    margin:0px;
  }
}

</style>
